<template>
  <div class="Search">
    <Back>
      <template #back-right>
        <div class="search-ipt">
          <input
            class="ipt-box"
            type="text"
            placeholder="输入菜谱名称关键字"
            v-model="keyword"
            @input="search"
          />
        </div>
      </template>
    </Back>
    <div class="suggests">
      
      <div class="suggest-box"  v-for="(item, index) in searchsuggest" :key="index">
        <div class="suggest-title" @click="changekeyword(item.name)">{{ item.name }}
          
        </div>
        
      </div>
    </div>
    <div class="results">
      <div class="result" v-for="(item , index) in searchdata" :key="index">
        <div class="result-box">
        
          <div class="result-img" @click="godatail(item.r.id)">
           <img :src="item.r.img" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Back from "../components/Back.vue";
export default {
  name: "search",
  data() {
    return {
      keyword: this.value,
      keyword: "",
      //定时器序号
      timer: null,
      value:'',
      value:this.value,
      searchdata:[],
      searchsuggest: [],
    };
  },
  created() {
    this.searchProduct(this.value);
    this.hotsearch();
    this.value = this.$route.params.value;
  },
  methods: {
    // 跳转菜谱详情
     godatail(id) {
      this.$router.push({ name: "Bijidetail", params: { id } });
    },
    // 热门搜索
    hotsearch() {
      this.axios({
        methods: "get",
        url: "https://apis.netstart.cn/douguo/recipe/search/hot",
      })
        .then((res) => {
          this.searchsuggest = res.data.result.suggests;
          // console.log("hotsearch.res==>", res);
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },
    // 发起搜索
    searchProduct() {
      // let params = {
       
      //   order: 0,
      //   type: 0,
      //   offset: 0,
      //   limit: 20,
      // };
      this.axios({
        methods: "GET",
        url: "https://apis.netstart.cn/douguo/recipe/search?keyword="+`${this.keyword}`+"&order=0&type=0&offset=0&limit=20",
    
      })
        .then((res) => {
          this.searchdata = res.data.result.list
          console.log("searchProduct.res==>", res);
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },
    //输入关键字搜索
    search() {
      //使用函数节流控制触发函数执行的频率
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        console.log("value==>",this.keyword);
      }, 1000);
      this.searchProduct()
    },
    changekeyword(item) {
      // console.log('value==>',index);
      console.log("item.name==>",item);
      this.keyword = item
      this.searchProduct()

    },
   
  },
  components: {
    Back,
  },
};
</script>

<style lang="less" scoped>
.search-btn {
  height: 26px;
  background-color: #e8e8e8;
  width: 160px;
  text-align: center;
  line-height: 26px;
  margin: 20px auto 10px;
  border-radius: 13px;
  font-size: 14px;
}

.search-history {
  background-color: #fff;
  padding-bottom: 20px;
}
.search-ipt {
  margin-right: 10px;
  height: 28px;
  border-radius: 14px;
  overflow: hidden;
  padding: 0 14px;
}

.ipt-box{
  border: none;
}
/deep/.van-nav-bar__right{
  width: 80%;
}
.suggests{
  display: flex;
  flex-wrap: wrap;
  margin: 5px;
}
.suggest-box{
  display: flex;
  margin: 2px auto;
  background-color: rgba(0,0,0,.1) ;
  }
.suggest-title{
  color: #888;
  font-size: 14px;
  height: 30px;
  line-height: 30px;
  margin: 0 5px ;
}
.result-img img{
  width: 100%;
  }
.result{
  position: relative;
  animation-duration: 2s;
  break-inside: avoid;
}
.results{
  column-count: 2;
   column-gap: 10px;
}
 



 
</style>